<!DOCTYPE html> 
<html>

<head>
  <title></title>
  
  
  
  <?php
      include_once('head.php'); 
   ?> 
  
  <script>  
  
  
  
  $('#page1').live('pageshow', function(event, ui) {
    //$('#page1 a.nextbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; right: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 1px 0 0 rgba(255,255,255, 0.25), inset 1px 0 1px rgba(0,0,0, 0.2)"></div>');
    
    
		/*
		* OSS: in questo caso essendo le 2 pagine nello stesso file non è necessario
		* salvare le info nella sessione ma semplicemente basta recuperare i dati
		* dalle form. In questo caso è una prova.
		*/
	  
	  //alert('Parameter ID: ' + JSON.parse(sessionStorage.getItem('gift')).budget_min); 
    // alert('Parameter ID: ' + JSON.parse(sessionStorage.getItem('user')).name);
  });
  
  
  $(document).ready(function(){
  
        
  alert( <?php echo $_GET['p'] ?>);
	
	
	// se radio = Group
	$('input#group_opt').live('change', function(){
      $('div#single_gift_option').hide();
      $('div#group_gift_option').show();
      $('a#fer').attr('href', '#page2');
      $('a#fer').attr('data-ajax', 'true');
  });
  
  
  // se radio = Single
  $('input#single_opt').live('change', function(){
      $('div#group_gift_option').hide();
      $('div#single_gift_option').show();
      $('a#fer').attr('href', 'page.gift_list.php');
      $('a#fer').attr('data-ajax', 'false');
  });
  
  
  
  
	
	// $('div[data-role="fieldcontain"] fieldset div div:first-child label span span').html('<img src="/images/glyphish-icons-png/111-user.png" width="18px" height="16px"></img>');
	// $('div[data-role="fieldcontain"] fieldset div div:last-child label span span').html('<img src="/images/glyphish-icons-png/112-group.png" width="24px" height="16px"></img>');




  $('#group_gift_option input[name=budget]').click(function() {
    
    $("#group_gift_option input[type='radio']").attr("checked",false).checkboxradio("refresh");
        
    
    $(this).attr('checked', true).checkboxradio("refresh");
  
    
  });
  
 
    
});



/* example:
  var name = new Person('Josh', 'Pepper', '25');

  sessionStorage.setItem('example', JSON.stringify(name));
  
  $('a#click').click(function(e){
      var temp = sessionStorage.getItem('example');
      var viewName = $.parseJSON(temp);
      var div = '<div>' + viewName.FirstName + ' ' + viewName.LastName + ' is ' + viewName.Age + ' years old.' + '</div>';
      $('div#show').html(div);
      e.preventDefault();
  });


  function Person(fName, lName, age){
      this.FirstName = fName;
      this.LastName = lName;
      this.Age = age;
      
  }
*/



  
  
</script>
  
</head>

  <body>
  
  
  
  <!-- PAGE 1: definizione budget e profilo destinatario -->
  
 <?php include('page.budget.html');  ?>


<!-- PAGE 2	-->

<div data-role="page" id="page2" data-theme="f">
  
  <script>
    $( "#page2" ).live( "pageinit", function( event ) { // 9fb3cc
       
       $('#page2 a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');        
       $('#page2 a.nextbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; right: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 1px 0 0 rgba(255,255,255, 0.25), inset 1px 0 1px rgba(0,0,0, 0.2)"></div>');
    });
    
    
    // uso live perchè al caricamento della pagina esiste solo una input email
    // le altre vengono create al click su Add. Con live aggancio l'evento anche 
    // agli elementi creati dinamicamente.
    
    var budget_singolo;
    
    
    $('#page2').live('pageshow', function() { // avviene solo se gruppo
        
        // recupero il budget singolo dalla sessione
        var gift = JSON.parse(sessionStorage.getItem('gift'));
         
        budget_singolo = gift.giftbudget;  // in questo caso è il budget a testa xk gruppo
        
        //alert(gift.giftbudget);
        
        $('#budget_group_tot').html(budget_singolo + '€');
      
    });
    
    
     $("#add").live('click',function(e) {
      $("#email").append('<input type="email" data-mini="true" data-clear-btn="true" placeholder="Email address" name="email[]" value="">');
      $('input[name=email\\[\\]]').textinput();            
    });
    
       
    
    $('#email input[type=email]').live("change keyup input",function() {
        
        // conteggio quante email sono piene
        
        var t = Array();
        $.each($('input[name=email\\[\\]]'),function(){        
          if ($(this).val() != '')
            t.push($(this).val()); 
        });
        
        // calcolo il tot = budget singolo * numero amici del gruppo
        var tot = parseInt(budget_singolo) * (t.length + 1);
        
        $('#budget_group_tot').html(tot + '€');
  
      });
    
    
    
    
  </script>

    <div data-role="header" data-theme="f">
        <a href="page.group_gift.php" class="backbutton" data-rel="back" data-ajax="false">Back </a>
        <h1>Crea il gruppo</h1>  <!-- posso mettere id=fer qui e toglierlo da sopra tanto le pag sono nello stesso file -->
        <a id="" href="page.gift_list.php" data-ajax="false" class="nextbutton">Next</a> 
    </div><!-- /header -->

    <div data-role="content">    
        
        <p>
          Invita i tuoi amici via mail:
        </p>
        <form id="email">          
          <label for="email">Email: </label>
          <input type="email" data-mini="true" data-clear-btn="true" placeholder="Email address" name="email[]" value="">          
        </form>
        
        <a id="add" href="#" data-icon="plus" data-theme="b"  data-role="button" data-inline="true">Add</a>
        <a id="submitForm" href="#" data-role="button" data-inline="true">Invita</a>
        

		<p>
		  <label>Budget tot: </label>
		  <label id="budget_group_tot"> </label>
		</p>
		
		<hr>
		<p> Invita i tuoi amici su Facebook</p>
		        
    </div><!-- /content -->
    
    <div style="text-align: center"  data-role="footer" data-theme="c" >
      <ul style="list-style: none; padding: 0">
        <li>
         <a data-inline="true" href="" 
             style ="text-decoration: none; font-size: 13px; color: #999999 ">Giftshake © 2013</a>       
         
         <a data-inline="true" href="" 
             style ="text-decoration: none; padding-left: 20px; font-size: 13px; color: #999999" >Guida
         </a>
        </li>
     </ul>
   </div>

</div><!-- /page -->




  <script>

  function Gift(giftname, giftdest, giftbudget) {  // budget can be for single or group
      this.name = giftname;
      this.dest = giftdest;      
      this.giftbudget = giftbudget;  
  }
  
    $("#fer").click(function(e) {

		var giftname = 'prova'; //$('input[name=giftname]').val();
		var giftdest = 'p'; //$('input[name=giftdest]').val();
		
		
		var giftbudget = '';
		
		
		if ($('input[name=radio_s_g]:checked').val() == 'group') 
		  giftbudget = $('input[name=budget]:checked').val();
		else {		  
		  giftbudget = $('input[name=budget]:checked').val();
		  
		}  

		
		var gift = new Gift(giftname, giftdest, giftbudget);
		
		//alert(giftname); 
		sessionStorage.setItem('gift', JSON.stringify(gift) );
		
		
    //alert(gift.giftbudget);
    	
  });

    
  </script>
  
  
  <script>
    
     
    $("#submitForm").click(function(e) {
      
      // alert(JSON.stringify($('input[name=email\\[\\]]').serializeArray()));
      
      var t = Array();
      $.each($('input[name=email\\[\\]]'),function(){        
        t.push($(this).val()); 
      });
      
 
       // memorizzo in sessione gli indirizzi mail del gruppo
       sessionStorage.setItem('friends_email', JSON.stringify(t));
       
       // 4 test: recupero gli indirizzi mail salvati in sessione
       var storedNames = JSON.parse(sessionStorage["friends_email"]);
       
       // stampo ogni singolo indirizzo mail recuperato  
        $.each(storedNames,function(key,val){
           
      });
      
      
      
     /* 
      var formData = $("#email").serialize();
         // alert(formData);
    
          $.ajax({
              type: "POST",
              url: "script_invite.php",
              cache: false,
              data: formData,
              success: onSuccess,
              error: onError
          });

          return false;
    });
    */
    
    
  </script>
  

  </body>
</html>